<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>离线语音转文字</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        :root {
            --primary: #4CAF50;
            --secondary: #2E7D32;
            --light: #F1F8E9;
            --dark: #1B5E20;
            --gray: #9E9E9E;
        }
        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            text-align: center; 
            background-color: #f9f9f9;
            margin: 0;
            padding: 20px;
        }
        .container { 
            max-width: 800px; 
            margin: 0 auto; 
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        h1 { 
            color: var(--dark);
            margin-bottom: 30px;
        }
        .section {
            margin: 25px 0;
            padding: 20px;
            border-radius: 10px;
            background-color: var(--light);
        }
        button {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 16px;
            margin: 5px;
            cursor: pointer;
            border-radius: 50px;
            transition: all 0.3s;
        }
        button:hover {
            background-color: var(--secondary);
            transform: translateY(-2px);
        }
        button:disabled {
            background-color: var(--gray);
            cursor: not-allowed;
            transform: none;
        }
        #status { 
            color: var(--dark); 
            margin: 15px 0;
            font-size: 18px;
            min-height: 24px;
        }
        #result { 
            margin-top: 20px; 
            padding: 20px; 
            border: 2px dashed var(--primary);
            min-height: 60px;
            border-radius: 10px;
            font-size: 18px;
            line-height: 1.6;
            white-space: pre-wrap;
        }
        .upload-area {
            border: 2px dashed var(--primary);
            padding: 20px;
            border-radius: 10px;
            margin-top: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .upload-area:hover {
            background-color: rgba(76, 175, 80, 0.05);
        }
        #audioFile {
            display: none;
        }
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(76, 175, 80, 0.3);
            border-radius: 50%;
            border-top-color: var(--primary);
            animation: spin 1s ease-in-out infinite;
            margin-right: 8px;
            vertical-align: middle;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .upload-language{
        	width:50px;
        	height:30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-microphone-alt"></i> 离线语音转文字</h1>
        
        <div class="section">
            <h3>上传音频文件 <small>(支持 WAV/MP3)</small></h3>
            <div class="upload-area" id="uploadArea">
                <i class="fas fa-cloud-upload-alt" style="font-size: 30px; color: var(--primary);"></i>
                <p>点击或拖拽文件到这里</p>
                <input type="file" id="audioFile" accept="audio/*">
            </div>
            <select id="language" class="upload-language">
            	<option value="en">英语</option>
            	<option value="cn">汉语</option>
            	<option value="th">泰语</option>
            </select>
            <button id="uploadBtn"><i class="fas fa-play"></i> 上传并识别</button>
        </div>
        <!-- 状态和结果 -->
        <div id="status">请点击"开始录音"按钮开始...</div>
        <h3>识别结果:</h3>
        <div id="result"></div>
    </div>

    <script>
        let mediaRecorder;
        let audioChunks = [];
        let audioBlob = null;
        let animationId = null;
        let audioContext;
        let scriptProcessor;
        let sourceNode;
        
        const $result = $('#result');
        const $status = $('#status');
        const $uploadBtn = $('#uploadBtn');
        const $audioFile = $('#audioFile');
        const $uploadArea = $('#uploadArea');
        const $language = $("#language");
        
        // 文件上传功能
        $uploadArea.on('click', function() {
            $audioFile.click();
        });
        
        $audioFile.on('click', function(e) {
        	e.stopPropagation();
            if (e.target.files.length > 0) {
                const file = e.target.files[0];
                $status.text('已选择文件: ' + file.name);
            }
        });
        
        // 拖拽支持
        $uploadArea.on('dragover', function(e) {
            e.preventDefault();
            $(this).css('background-color', 'rgba(76, 175, 80, 0.1)');
        });
        
        $uploadArea.on('dragleave', function() {
            $(this).css('background-color', 'transparent');
        });
        
        $uploadArea.on('drop', function(e) {
            e.preventDefault();
            $(this).css('background-color', 'transparent');
            if (e.originalEvent.dataTransfer.files.length > 0) {
                $audioFile[0].files = e.originalEvent.dataTransfer.files;
                $status.text('已选择文件: ' + $audioFile[0].files[0].name);
            }
        });
            
        $uploadBtn.on('click', async function() {
            const file = $audioFile[0].files[0];
            if (!file) {
                alert("请选择一个音频文件");
                return;
            }
            const ext = file.name.split('.').pop().toLowerCase();
            await sendAudioToBackend(file, ext);
        });
        
        // 发送音频到后端
        async function sendAudioToBackend(blob, ext) {
            $status.html('<span class="loading"></span> 正在识别...');
            const formData = new FormData();
            formData.append('file', blob, 'audio.' + ext);
            formData.append("language",$language.val())
            
            try {
                const response = await fetch('/api/speech/transcribe', {
                    method: 'POST',
                    body: formData
                });
                
                if (!response.ok) {
                    throw new Error('识别失败');
                }
                
                const text = await response.text();
                $result.text(text);
                $status.text('识别完成');
            } catch (error) {
                $status.text('识别出错: ' + error.message);
            }
        }
    </script>
</body>
</html>